<template>
	<view class="layout">
		<scroll-view scroll-y="true" >
			
		
			<view class="box" v-for="(item,index) in 8" :key="index">
				<view class="row">
					<view class="left">
						课程名称
					</view>
					<view class="right">
						文献综述必修环节(1)
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						学时
					</view>
					<view class="right">
						16
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						
							学分
						
					</view>
					<view class="right">
					
							1
					
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						
							学期
						
					</view>
					<view class="right">
					
							6
					
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						平时
					</view>
					<view class="right">
						优
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						作业
					</view>
					<view class="right">
						优
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						期末
					</view>
					<view class="right">
						优
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						成绩
					</view>
					<view class="right">
						优
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						班级排名
					</view>
					<view class="right">
						25
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						类别
					</view>
					<view class="right">
						必修环节
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						属性
					</view>
					<view class="right">
						正常
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						备注
					</view>
					<view class="right">
						
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

</script>

<style lang='scss' scoped>
	   .layout{
		   scroll-view{
			   height:82vh;
		   }
		   .box{
			   border: 1rpx solid $xx-color-body;
			   border-radius: 10rpx;
			   padding: 10rpx 10rpx;
			   margin-bottom: 20rpx;
			   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
			   .row{
				   display: flex;
				   justify-content: space-between;
				   align-items: center;
				   font-size: 26rpx;
				   padding: 2rpx 0;
				   border-bottom: 1rpx dashed $xx-color-body;
				   line-height: 50rpx;
				   .right{
					   color: $xx-color-body;
					   
				   }
				   .left{
					   
				   }
			   }
		   }
	   }    
</style>